<template>
  <div class="big">
    <!-- 最上部导航栏 -->
    <div v-show="show">
      <van-nav-bar
        title="电影"
        left-arrow
        :fixed="show"
        @click-left="onClickLeft"
      >
        <template #left>
          {{ cityName }} <van-icon name="arrow-down" color="#ccc" />
        </template>
      </van-nav-bar>
    </div>

    <div :class="{ nav: navShow }">
      <van-tabs v-model="active" @scroll="scroll" sticky :offset-top="navTOP">
        <!-- 渲染正在热映 -->
        <van-tab title="正在热映" to="/nowPlaying">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="list" v-for="hot in hotFilms" :key="hot.filmId">
              <van-card :thumb="hot.poster" @click="movieFilm(hot.filmId)">
                <template #desc>
                  <p class="garde">
                    观众评分 <span>{{ hot.grade }}</span>
                  </p>
                </template>
                <template #title>
                  <p class="title">
                    {{ hot.name }} <span>{{ hot.timeType }}D</span>
                  </p>
                </template>
                <template #tags>
                  <div class="mi">
                    <p class="actor">主演：{{ dire(hot.filmId) }}</p>
                    <van-button
                      class="btn"
                      size="mini"
                      color="rgb(255, 81, 0)"
                      plain
                      @click="buyTicket(hot.filmId)"
                      >购票</van-button
                    >
                  </div>

                  <p class="country">
                    {{ hot.nation }} | {{ hot.runtime }}分钟
                  </p>
                </template>
              </van-card>
              <van-divider />
            </div>
          </van-list>
        </van-tab>
        <!-- 渲染正在上映 -->
        <van-tab title="即将上映" to="/comingSoon">
          <van-list
            v-model="comLoading"
            :finished="comFinished"
            finished-text="没有更多了"
            @load="LoadComing"
          >
            <div class="list" v-for="hot in comingList" :key="hot.filmId">
              <van-card @click="movieFilm(hot.filmId)" :thumb="hot.poster" >
                <template #desc> </template>
                <template #title>
                  <p class="title">
                    {{ hot.name }} <span>{{ hot.timeType }}D</span>
                  </p>
                </template>
                <template #tags>
                  <div class="mi">
                    <p class="actor">主演：{{ comDir(hot.filmId) }}</p>
                  </div>
                  <p class="garde">
                    上映时间 <span>{{ hot.premiereAt | formatDate }}</span>
                  </p>
                </template>
              </van-card>
              <van-divider />
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
    <div class="con"></div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Tab,
  Tabs,
  NavBar,
  Icon,
  Card,
  Button,
  Divider,
  List,
  PullRefresh,
  Cell,
} from "vant";
import { getNowPlays, getComing } from "@/request/request";

Vue.use(Cell);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(NavBar);
Vue.use(Icon);
Vue.use(Card);
Vue.use(Button);
Vue.use(Divider);
Vue.use(List);
Vue.use(PullRefresh);

export default {
  created() {
    this.cityName = this.$store.state.city;
  },
  data() {
    return {
      cityName: "",
      active: 0,
      show: false,
      // 热映
      hotFilms: [],
      loading: false,
      finished: false,
      pageNum: 1,
      // 即将上映
      comingPage: 1,
      comingList: [],
      comLoading: false,
      comFinished: false,

      navTOP: "0px",
    };
  },
  filters: {
    formatDate(val) {
      let date = new Date(val * 1000);
      let year = date.getFullYear();
      let month = date.getMonth();
      let day = date.getDate();
      return year + "年" + month + "月" + day + "日";
    },
  },
  computed: {
    navShow() {
      return this.show;
    },

    dire() {
      return function (id) {
        let arr = this.hotFilms.find((item) => item.filmId === id);
        let str = "";
        arr.actors.forEach((name) => {
          str = str + " " + name.name;
        });
        return str;
      };
    },
    comDir() {
      return function (id) {
        let arr = this.comingList.find((item) => item.filmId === id);
        let str = "";
        arr.actors.forEach((name) => {
          str = str + " " + name.name;
        });
        return str;
      };
    },
    changeCity: {
      get() {
        return this.$store.state.city;
      },
      set() {
        this.$store.commit("changeActive", this.index);
      },
    },
  },
  mounted() {
    window.addEventListener("scroll", this.scroll);
  },
  methods: {
    buyTicket(id) {
      this.$router.push({ path: "/movie/cinemas", query: { id } });
    },
    movieFilm(id) {
      this.$router.push({ path: "/film", query: { id } });
    },
    onClickLeft() {
      this.$router.push("/city");
    },
    scroll(Top) {
      if (Top.scrollTop >= 300) {
        this.show = true;
        this.navTOP = "46px";
      } else if (Top.scrollTop < 300) {
        this.show = false;
        this.navTOP = "0px";
      }
    },
    onLoad() {
      getNowPlays(this.pageNum).then((da) => {
        if (da.status === 0 && da.msg === "ok") {
          let total = da.data.total;
          if (this.hotFilms.length >= total) {
            this.pageNum = 1;
            this.finished = true;
          } else {
            this.hotFilms.push(...da.data.films);
            this.pageNum += 1;
          }
        }
        this.loading = false;
      });
    },
    LoadComing() {
      getComing(this.comingPage).then((da) => {
        if (da.status === 0 && da.msg === "ok") {
          let total = da.data.total;
          if (this.comingList.length >= total) {
            this.comingPage = 1;
            this.comFinished = true;
            // return
          } else {
            this.comingList.push(...da.data.films);
            this.comingPage += 1;
          }
        }
        this.comLoading = false;
      });
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.big {
  height: 100%;
  // position: relative;
}
.van-tabs__nav {
  position: fixed;
}

.nav {
  width: 100%;
  z-index: 9999;
}
.van-list {
  ::v-deep .van-list__placeholder {
    height: 50px;
  }
}
.list {
  position: relative;
  padding: 15px;
  background-color: #fff;

  .van-card {
    background-color: #fff;
    ::v-deep .van-card__thumb img {
      border-radius: 0px;
    }
    ::v-deep .van-card__thumb {
      width: 66px;
      margin-right: 10px;
    }
    ::v-deep .van-button--mini {
      width: 50px;
      height: 25px;
      border-radius: 4px;
      font-size: 14px;
    }
    .mi {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    ::v-deep p.title {
      height: 22px;
      line-height: 22px;
      font-size: 16px;
      margin: 0 5px 0 0;
      span {
        font-size: 9px;
        color: #fff;
        background-color: #d2d6dc;
        display: inline-block;
        text-align: center;
        width: 21px;
        height: 14px;
        line-height: 14px;
        padding: 0 2px;
        border-radius: 2px;
      }
    }
    .garde,
    .country,
    .actor {
      font-size: 13px;
      color: #797d82;
      margin: 4px 0 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .garde span {
      color: #ffb232;
      font-style: 14px;
    }
  }
}
</style>
